function Snake(el) {
  this.el = el;
  this.len = 20;
  this.snakeObj = [
    { x: 3, y: 2, color: "red", el: null }, //蛇头
    { x: 2, y: 2, color: "blue", el: null }, // 蛇的身体
    { x: 1, y: 2, color: "blue", el: null } // 蛇的身体
  ];
  this.direction = "right";
}
Snake.prototype.remove = function() {
  for (let i = 0; i < this.snakeObj.length; i++) {
    if (this.snakeObj[i].el) {
      this.el.removeChild(this.snakeObj[i].el);
    }
  }
};

Snake.prototype.create = function() {
  this.remove();
  for (let i = 0; i < this.snakeObj.length; i++) {
    let divObj = document.createElement("div");
    divObj.style.width = this.len + "px";
    divObj.style.height = this.len + "px";
    divObj.style.position = "absolute";
    divObj.style.left = this.snakeObj[i].x * this.len + "px";
    divObj.style.top = this.snakeObj[i].y * this.len + "px";
    divObj.style.background = this.snakeObj[i].color;
    this.snakeObj[i].el = divObj;
    this.el.appendChild(divObj);
  }
};
Snake.prototype.move = function() {
  for (let i = this.snakeObj.length - 1; i > 0; i--) {
    this.snakeObj[i].x = this.snakeObj[i - 1].x;
    this.snakeObj[i].y = this.snakeObj[i - 1].y;
  }
  switch (this.direction) {
    case "top":
      this.snakeObj[0].y -= 1;
      if (this.snakeObj[0].y == -1) {
        alert("GG");
      }
      break;
    case "bottom":
      this.snakeObj[0].y += 1;
      if (this.snakeObj[0].y == 400 / this.len) {
        alert("GG");
      }
      break;
    case "left":
      this.snakeObj[0].x -= 1;
      if (this.snakeObj[0].x == -1) {
        alert("GG");
      }
      break;
    case "right":
      this.snakeObj[0].x += 1;
      if (this.snakeObj[0].x == 800 / this.len) {
        alert("GG");
      }
      break;
  }
  this.create();
};
